<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户管理</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .customer-card {
            background: rgba(255, 255, 255, 0.95);
            transition: all 0.3s ease;
        }
        .customer-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        .status-active {
            background: linear-gradient(135deg, #10b981, #059669);
        }
        .status-inactive {
            background: linear-gradient(135deg, #f59e0b, #d97706);
        }
        .status-potential {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-4 py-2 bg-black text-white text-sm">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <i class="fas fa-battery-three-quarters"></i>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="px-4 py-6">
        <!-- 头部 -->
        <div class="flex items-center justify-between mb-6">
            <button class="text-white" onclick="history.back()">
                <i class="fas fa-arrow-left text-xl"></i>
            </button>
            <h1 class="text-xl font-bold text-white">客户管理</h1>
            <button class="text-white" onclick="addCustomer()">
                <i class="fas fa-plus text-xl"></i>
            </button>
        </div>

        <!-- 搜索和筛选 -->
        <div class="mb-6">
            <div class="relative mb-4">
                <input type="text" placeholder="搜索客户姓名或手机号" 
                       class="w-full px-4 py-3 pl-12 bg-white bg-opacity-20 text-white placeholder-white placeholder-opacity-70 rounded-xl border-none outline-none"
                       oninput="searchCustomers(this.value)">
                <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-white text-opacity-70"></i>
            </div>
            
            <div class="flex space-x-2">
                <button class="px-4 py-2 bg-white text-purple-600 rounded-full text-sm font-medium" onclick="filterStatus('all')">全部</button>
                <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterStatus('active')">活跃客户</button>
                <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterStatus('potential')">潜在客户</button>
                <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterStatus('inactive')">沉睡客户</button>
            </div>
        </div>

        <!-- 客户统计 -->
        <div class="grid grid-cols-3 gap-3 mb-6">
            <div class="glass-card rounded-xl p-3 text-center">
                <div class="text-2xl font-bold text-white">89</div>
                <div class="text-white text-opacity-80 text-sm">总客户</div>
            </div>
            <div class="glass-card rounded-xl p-3 text-center">
                <div class="text-2xl font-bold text-green-300">56</div>
                <div class="text-white text-opacity-80 text-sm">活跃客户</div>
            </div>
            <div class="glass-card rounded-xl p-3 text-center">
                <div class="text-2xl font-bold text-blue-300">23</div>
                <div class="text-white text-opacity-80 text-sm">本月新增</div>
            </div>
        </div>

        <!-- 客户列表 -->
        <div class="space-y-4" id="customerList">
            <!-- 活跃客户 -->
            <div class="customer-card rounded-xl p-4" data-status="active">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center text-white font-bold mr-3">
                            张
                        </div>
                        <div>
                            <div class="font-semibold text-gray-800">张小明</div>
                            <div class="text-sm text-gray-500">138****5678</div>
                        </div>
                    </div>
                    <div class="status-active text-white px-3 py-1 rounded-full text-xs font-medium">
                        活跃客户
                    </div>
                </div>
                
                <div class="grid grid-cols-3 gap-4 mb-3">
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">12</div>
                        <div class="text-xs text-gray-500">订单数</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">¥15,680</div>
                        <div class="text-xs text-gray-500">消费金额</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">3天前</div>
                        <div class="text-xs text-gray-500">最后联系</div>
                    </div>
                </div>
                
                <div class="flex space-x-2">
                    <button class="flex-1 bg-blue-500 text-white py-2 rounded-lg text-sm" onclick="contactCustomer('张小明', '138****5678')">
                        <i class="fas fa-phone mr-1"></i>联系
                    </button>
                    <button class="flex-1 bg-green-500 text-white py-2 rounded-lg text-sm" onclick="viewOrders('张小明')">
                        <i class="fas fa-list mr-1"></i>订单
                    </button>
                    <button class="flex-1 bg-purple-500 text-white py-2 rounded-lg text-sm" onclick="editCustomer('张小明')">
                        <i class="fas fa-edit mr-1"></i>编辑
                    </button>
                </div>
            </div>

            <!-- 潜在客户 -->
            <div class="customer-card rounded-xl p-4" data-status="potential">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-500 rounded-full flex items-center justify-center text-white font-bold mr-3">
                            李
                        </div>
                        <div>
                            <div class="font-semibold text-gray-800">李小红</div>
                            <div class="text-sm text-gray-500">139****8765</div>
                        </div>
                    </div>
                    <div class="status-potential text-white px-3 py-1 rounded-full text-xs font-medium">
                        潜在客户
                    </div>
                </div>
                
                <div class="grid grid-cols-3 gap-4 mb-3">
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">0</div>
                        <div class="text-xs text-gray-500">订单数</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">¥0</div>
                        <div class="text-xs text-gray-500">消费金额</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">1天前</div>
                        <div class="text-xs text-gray-500">最后联系</div>
                    </div>
                </div>
                
                <div class="flex space-x-2">
                    <button class="flex-1 bg-blue-500 text-white py-2 rounded-lg text-sm" onclick="contactCustomer('李小红', '139****8765')">
                        <i class="fas fa-phone mr-1"></i>联系
                    </button>
                    <button class="flex-1 bg-orange-500 text-white py-2 rounded-lg text-sm" onclick="sendPromotion('李小红')">
                        <i class="fas fa-gift mr-1"></i>推广
                    </button>
                    <button class="flex-1 bg-purple-500 text-white py-2 rounded-lg text-sm" onclick="editCustomer('李小红')">
                        <i class="fas fa-edit mr-1"></i>编辑
                    </button>
                </div>
            </div>

            <!-- 沉睡客户 -->
            <div class="customer-card rounded-xl p-4" data-status="inactive">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white font-bold mr-3">
                            王
                        </div>
                        <div>
                            <div class="font-semibold text-gray-800">王大力</div>
                            <div class="text-sm text-gray-500">137****4321</div>
                        </div>
                    </div>
                    <div class="status-inactive text-white px-3 py-1 rounded-full text-xs font-medium">
                        沉睡客户
                    </div>
                </div>
                
                <div class="grid grid-cols-3 gap-4 mb-3">
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">3</div>
                        <div class="text-xs text-gray-500">订单数</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">¥2,580</div>
                        <div class="text-xs text-gray-500">消费金额</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">30天前</div>
                        <div class="text-xs text-gray-500">最后联系</div>
                    </div>
                </div>
                
                <div class="flex space-x-2">
                    <button class="flex-1 bg-blue-500 text-white py-2 rounded-lg text-sm" onclick="contactCustomer('王大力', '137****4321')">
                        <i class="fas fa-phone mr-1"></i>联系
                    </button>
                    <button class="flex-1 bg-red-500 text-white py-2 rounded-lg text-sm" onclick="reactivateCustomer('王大力')">
                        <i class="fas fa-heart mr-1"></i>唤醒
                    </button>
                    <button class="flex-1 bg-purple-500 text-white py-2 rounded-lg text-sm" onclick="editCustomer('王大力')">
                        <i class="fas fa-edit mr-1"></i>编辑
                    </button>
                </div>
            </div>
        </div>

        <!-- 浮动操作按钮 -->
        <div class="fixed bottom-20 right-4">
            <button class="w-14 h-14 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full shadow-lg" onclick="bulkActions()">
                <i class="fas fa-tasks"></i>
            </button>
        </div>
    </div>

    <script>
        /**
         * 搜索客户
         * @param {string} keyword - 搜索关键词
         */
        function searchCustomers(keyword) {
            const customers = document.querySelectorAll('.customer-card');
            customers.forEach(customer => {
                const name = customer.querySelector('.font-semibold').textContent;
                const phone = customer.querySelector('.text-gray-500').textContent;
                const isMatch = name.includes(keyword) || phone.includes(keyword);
                customer.style.display = isMatch ? 'block' : 'none';
            });
        }
        
        /**
         * 筛选客户状态
         * @param {string} status - 客户状态
         */
        function filterStatus(status) {
            // 更新按钮状态
            document.querySelectorAll('button').forEach(btn => {
                if (btn.textContent.includes('全部') || btn.textContent.includes('活跃') || 
                    btn.textContent.includes('潜在') || btn.textContent.includes('沉睡')) {
                    btn.classList.remove('bg-white', 'text-purple-600');
                    btn.classList.add('bg-white', 'bg-opacity-20', 'text-white');
                }
            });
            
            event.target.classList.remove('bg-white', 'bg-opacity-20', 'text-white');
            event.target.classList.add('bg-white', 'text-purple-600');
            
            // 筛选客户
            const customers = document.querySelectorAll('.customer-card');
            customers.forEach(customer => {
                if (status === 'all') {
                    customer.style.display = 'block';
                } else {
                    const customerStatus = customer.getAttribute('data-status');
                    customer.style.display = customerStatus === status ? 'block' : 'none';
                }
            });
        }
        
        /**
         * 联系客户
         * @param {string} name - 客户姓名
         * @param {string} phone - 客户电话
         */
        function contactCustomer(name, phone) {
            const action = confirm(`选择联系方式:\n\n确定 - 拨打电话\n取消 - 发送微信`);
            if (action) {
                alert(`正在拨打 ${name} 的电话: ${phone}`);
            } else {
                alert(`正在发送微信给 ${name}`);
            }
        }
        
        /**
         * 查看客户订单
         * @param {string} name - 客户姓名
         */
        function viewOrders(name) {
            alert(`查看 ${name} 的订单记录`);
            // 实际项目中跳转到订单页面
        }
        
        /**
         * 编辑客户信息
         * @param {string} name - 客户姓名
         */
        function editCustomer(name) {
            alert(`编辑 ${name} 的客户信息`);
            // 实际项目中打开编辑表单
        }
        
        /**
         * 发送推广信息
         * @param {string} name - 客户姓名
         */
        function sendPromotion(name) {
            alert(`向 ${name} 发送推广信息`);
            // 实际项目中打开推广模板选择
        }
        
        /**
         * 唤醒沉睡客户
         * @param {string} name - 客户姓名
         */
        function reactivateCustomer(name) {
            alert(`正在制定 ${name} 的唤醒策略`);
            // 实际项目中打开唤醒策略页面
        }
        
        /**
         * 添加新客户
         */
        function addCustomer() {
            alert('添加新客户');
            // 实际项目中打开添加客户表单
        }
        
        /**
         * 批量操作
         */
        function bulkActions() {
            alert('批量操作功能');
            // 实际项目中打开批量操作菜单
        }
        
        /**
         * 页面加载完成后的初始化
         */
        document.addEventListener('DOMContentLoaded', function() {
            console.log('客户管理页面加载完成');
            // 可以在这里添加其他初始化逻辑
        });
    </script>
</body>
</html>